<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

 <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
 <link href="css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet">
 
  <script type="text/javascript" src="js/jquery-1.4.2.js"></script>  
 <script type="text/javascript" src="js/jquery-ui-1.10.2.custom.js"></script>
 	

<!-- botão que gera unidade de armazenagem adicional -->
	<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
       
            $(document).ready(function() {
                $("#addA").click(function() {
            
                var ht='<br/><td><input name="qtde_mercadoria" type="text" id="qtde_mercadoria" size="5"></td><td><input name="nome_mercadoria" type="text" id="nome_mercadoria" size="12"></td><td><input name="condicao_mercadoria" type="text" id="valor_mercadoria" size="44"></td><td><input name="condicao_mercadoria" type="text" id="valor_mercadoria" size="20"></td>'
                
                    $("#dd").append(ht);
                });
            });
    </script>

<!-- pega o valor do input e joga no titulo da primeira tb-->
<script type="text/javascript">
	function mostraUa(){  	    
		//pega o numero do prcesso no input	
		//var txtR = document.getElementById("processo");
		//var processo = $( "#processo" ).val();
		var txtR = document.getElementById("Processo_NUM_LOG_PROCESSO");
		console.log($("#Processo_NUM_LOG_PROCESSO" ).val());
		var processo = $( "#Processo_NUM_LOG_PROCESSO" ).val();
		console.log($("#Processo_NUM_LOG_PROCESSO" ).val());	
		
		var n=processo.split('',3);
		n=n[0]+n[1]+n[2];
		n=(n*100)+1;
		//div da primeira aba
		var divR = document.getElementById("teste");
		//joga o valor na aba da primeira tab		  
		divR.innerHTML = n;  
		
		var divT = document.getElementById("ua");
		document.getElementById("ua").value=n;
		divT.innerHTML = n;  
	}
</script>


<!--<link rel="stylesheet" href="/resources/demos/style.css" />-->
<style>
#dialog label, #dialog input { display:block; }
#dialog label { margin-top: 0.5em; }
#dialog input, #dialog textarea { width: 95%; }
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }
</style>
<script>
$(function() {

	//var tabTitle = $( "#tab_title" ),
	var tabTitle = $( "#ua" ),
	tabContent = $( "#tab_content" ),
	tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remover 	    Tab</span></li>",
	tabCounter = 2;
	
	var tabs = $( "#tabs" ).tabs();
	// modal dialog init: custom buttons and a "close" callback reseting the form inside
	
	var dialog = $( "#dialog" ).dialog({
		autoOpen: false,
		modal: true,
		buttons: {
					Sim: function() {
						addTab();
						$( this ).dialog( "close" );
						},
					Não: function() {
						$( this ).dialog( "close" );
				}
		},
		close: function() {
		form[ 0 ].reset();
		}
	});
	// addTab form: calls addTab function on submit and closes the dialog
	var form = dialog.find( "form" ).submit(function( event ) {
		addTab();
		dialog.dialog( "close" );
		event.preventDefault();
	});
	// actual addTab function: adds new tab using the input from the form above
	function addTab() {
		
		tabCounter = tabCounter-1;
		var soma = parseInt(tabTitle.val()) + parseInt(tabCounter); 
		tabCounter=tabCounter+1;
		
		//var label = tabTitle.val() || "Tab " + tabCounter,
		var label = soma || "Tab " + tabCounter,
		id = "tabs-" + tabCounter,
		li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
	  
	    
		tabContentHtml ='<b>Armazenagem:</b><br><br>UA Nº:<input name="ua" type="text" value='+soma+' id="ua" size="10" disabled="disabled">Quantidade de Pallets:<input name="pallets" type="text" id="pallets" size="5"><br><br><b>Mercadoria:</b> <button id="botao'+id+'">+</button><div class="qtde">Qtde</div><div class="produto" >Unidade</div><div class="condicao" size="12">Mercadoria</div><div class="valor" >Condição</div><div id="id'+id+'"></div><br>' ;
	
	
		tabs.find( ".ui-tabs-nav" ).append( li );
		tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );	
		tabs.tabs( "refresh" );
		tabCounter++;
	
		 $(document).ready(function() {
			 
			 
                $("#botao"+id).click(function() {
             
                var ht='<br/><td><input name="qtde_mercadoria" type="text" id="qtde_mercadoria" size="5"></td><td><input name="nome_mercadoria" type="text" id="nome_mercadoria" size="12"></td><td><input name="condicao_mercadoria" type="text" id="condicao_mercadoria" size="44"></td><td><input name="valor_mercadoria" type="text" id="valor_mercadoria" size="20"></td>'
                
                    $("#id"+id).append(ht);
                });
            });
		
	}

	// addTab button: just opens the dialog
	$( "#add_tab" )
		.button()
		.click(function() {
		dialog.dialog( "open" );
	});
	// close icon: removing the tab on click
	tabs.delegate( "span.ui-icon-close", "click", function() {
		var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
		$( "#" + panelId ).remove();
		tabs.tabs( "refresh" );
	});
	tabs.bind( "keyup", function( event ) {
		if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
		var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
		$( "#" + panelId ).remove();
		tabs.tabs( "refresh" );
	}	

});
});
</script>
</head>
<body>

<div id="dialog" title="Unidade de Armazenagem">
<form>
    <fieldset class="ui-helper-reset">
      <label for="tab_title">Confirmar Nova U.A ?</label>    
    </fieldset>
</form>
</div>


<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'processo-form',
	'enableAjaxValidation'=>false,
)); ?>

<div class="formProcesso">
		<p class="note">Campos com <span class="required">*</span> são obrigatórios.</p>
	
	<div class="row">	
		<p class="note"><b>SEGURO </b><br>
		Seguradora <span class="required">*</span>
		<?php echo $form->dropDownList($model,'TB_SEGURADORA_ID_SEGURADORA',Processo::model()->getSeguradoraOptions()); ?>
		<?php echo $form->error($model,'TB_SEGURADORA_ID_SEGURADORA'); 	?>
						
		<?php echo"Reguladora";?><span class="required">*</span>
		<?php echo $form->dropDownList($model,'TB_REGULADORA_ID_REGULADORA',Processo::model()->getReguladoraOptions()); ?>
		<?php echo $form->error($model,'TB_REGULADORA_ID_REGULADORA')?>
		
		<?php echo"Segurado";?> <span class="required">*</span> 
		<?php echo $form->dropDownList($model,'TB_SEGURADO_ID_SEGURADO',Processo::model()->getSeguradoOptions()); ?>
		<?php echo $form->error($model,'TB_SEGURADO_ID_SEGURADO'); ?>		
	</div>
	
	<div class="row">
		<?php echo $form->errorSummary($model); ?>
		<p class="note"><b>NÚMERO DE PROCESSO </b><br>		
			<?php echo"Logistimática";?> <span class="required">*</span>
			<?php echo $form->textField($model,'NUM_LOG_PROCESSO',array('size'=>13,'maxlength'=>100,'onBlur'=>'mostraUa()')); ?>
			
					
			<?php echo"Reguladora";?> <span class="required">*</span>
			<?php echo $form->textField($model,'NUM_REG_PROCESSO',array('size'=>15,'maxlength'=>100)); ?>
			<?php echo $form->error($model,'NUM_REG_PROCESSO'); ?>
			
			<?php echo"Seguradora";?> <span class="required">*</span> 
			<?php echo $form->textField($model,'NUM_SEG_PROCESSO',array('size'=>15,'maxlength'=>100)); ?>
			<?php echo $form->error($model,'NUM_SEG_PROCESSO'); ?>
		</p>
	</div>
</div>	
</form>
<br>	
<button id="add_tab">+ U.A</button>            
           
<div id="tabs">
<ul>
    <li>
        <a href="#tabs-1"><div id="teste"></div></a> <span class="ui-icon ui-icon-close" role="presentation">		         Remover Tab</span>
    </li>
</ul>
<div id="tabs-1">

		 <b>Armazenagem:</b><br>
            <br>
            UA Nº:<input name="ua" type="text" id="ua" size="10" disabled="disabled" >Quantidade de Pallets:<input name="pallets" type="text" id="pallets" size="5">
           <br><br>
           
            <p><b>Mercadoria:</b> <button id="addA">+</button>                       
            <div class="qtde" >Qtde</div>
            <div class="produto" >Unidade</div>
            <div class="condicao" >Mercadoria</div>
            <div class="valor" >Condição</div>
            <div id="dd"></div>            
            <p/>&nbsp;&nbsp;&nbsp;
            <br />

</div>
</div>

<div class="formProcessoBtn">
	<div class="row buttons">
		<?php echo CHtml::submitButton($model->isNewRecord ? 'Salvar' : 'Salvar'); ?>
	</div>
</div>
<?php $this->endWidget(); ?>
	
</div><!-- form -->

</body>
</html>
